<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>发票管理</h3> </div>
                  <div class="yuansdj">
                    <div class="forms">
                      <el-form :model="ruleForm"  ref="ruleForm" label-width="140px" class="demo-ruleForm">
                        <el-form-item label="商家订单：" prop="bian">
                          <el-input v-model="ruleForm.region" style="width: 30%;"></el-input>
                        </el-form-item>

                        <el-form-item label="时间：" >
                          <el-date-picker
                            v-model="ruleForm.value1"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>

                        </el-form-item>
                        <el-form-item label="支付类型：" >
                          <el-select v-model="ruleForm.name" style="width: 30%;">
                            <el-option label="区域一11" value="shangha11i"></el-option>
                            <el-option label="区域二11" value="beijing11"></el-option>
                          </el-select>
                        </el-form-item>
                        
                        <el-form-item style="margin-left: 100px;">
                          <el-button type="danger" @click="submitForm('ruleForm')">申请开票</el-button>
                          <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
                          </el-form-item>
                      </el-form>
                    </div>
                    <div style="margin-left:2.5%">申请开票记录</div>
                     <div class="mouen">
                      <el-table
                          :data="tableData"
                          :header-cell-style="{background:'rgb(218,218,218)'}"
                          style="width: 100%">
                          <el-table-column
                            prop="date"
                            label="业务类型"
                           >
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="申请时间"
                         >
                          </el-table-column>
                          <el-table-column
                            prop="province"
                            label="发票金额"
                           >
                          </el-table-column>
                          <el-table-column
                            prop="city"
                            label="发票抬头"
                           >
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            label="发票类型"
                           >
                          </el-table-column>
                          <el-table-column
                            prop="zip"
                            label="状态"
                         >
                          </el-table-column>
                          <el-table-column
                            label="操作"
                            >
                            <!-- <template slot-scope="scope">
                              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                              <el-button type="text" size="small">编辑</el-button>
                            </template> -->
                          </el-table-column>
                        </el-table>
                     </div>
                    
                  </div>
                  <businessF/>
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        ruleForm: {
          name: '',
          posin:'',
          region: ''
        },
        tableData: []
      }
      
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}


.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra h3{
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}
.forms {
  margin-top: 20px;
}
.mouen{
  width: 95%;
  margin: 0 auto;
  border: solid 1px rgb(238,238,238);
}

</style>